<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .top{
            display: flex;
            align-items: flex-end;
            justify-content: center;
            width: 100%;
            height: 30vw;
            background: aqua;
            padding-bottom: 5vw;
        }
        .top input{
            width: 90%;
            height: 10vw;
            border-radius: 5vw;
        }
        .mid_top{
            height: 22vw;
            width: 100%;
        }
        h3{
            margin:0 0 5vw 5vw;
        }
        .active{
            font-weight: bolder;
        }
        .mid_mid{
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 4vw;
        }
        .end{
            display: flex;
            width: 100%;
            height: 40vw;
            padding: 0 5vw;
            /* background: red; */
        }
        .end img{
            width: 20vw;
            height: 30vw;
        }
        .end div{
            width: 70vw;
             color: gray;
        }
        .end div h4{
            color: black;
            font-size: 5vw;
        }
       
        .end p{
            display: flex;
            justify-content: space-between;
            color: gray;
        }
        #nav{
            display: flex;
            justify-content: space-evenly;

        }
        #nav img{
            width: 7vw;
            height: 7vw;
        }
        
        #nav{
            color: gray;
        }
        .active2{
            color: blue !important;
        }
    </style>
</head>
<body>
    <div class="top">
        <input type="text">
    </div>
    <div class="mid_top"></div>
    <h3>猜你喜欢</h3>
    <div id="app">   
        <div class="mid_mid">
        <span :class="{active:cuindex==index}" @click="cat(index)" v-for="(item,index) in arr">{{item}}</span>
        </div>
        <div class="mid_mid">
            <span v-for="(item,index) in arr2">{{item}}</span>
        </div>
        <div v-for="(item,index) in arr3" class="end">
            <img :src="item.imag" alt="">
            <div>
                <h4>{{item.nam}}</h4>
                <span style="color: orange;">*{{item.xing}}</span> 月售{{item.sell}}
                <p><span> 起送￥{{item.ifgo}} 配送￥{{item.go}}</span> <span>{{item.minu}}分钟 {{item.long}}km</span></p>
            </div>
        </div>

    </div>
    <div id="nav">
        <div :class="{active2:navIndex==index}" v-on:click="trs(index)" v-for="(item,index) in arr4">
        <img :src="item.jpg" alt="">
        <p>{{item.navtitle}}</p>
        </div>
    </div>
</body>
</html>
<script src="../vue-2.5.21.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            cuindex:0,
            arr:['综合排序','距离最近','销量最高'],
            arr2:['年货节热卖','津贴联盟','满减优惠','品质联盟'],
            arr3:[
                {imag:"img/2.JPG",nam:"金百万烤鸭（苏家坨店）",xing:"4.3",sell:"1632",ifgo:"20",go:"3",minu:"47",long:"3.9"},
                {imag:"img/3.JPG",nam:"稻香金源饺子馆",xing:"4.4",sell:"230",ifgo:"20",go:"3.5",minu:"44",long:"2.5"}
            ]
        },
        methods:{
            cat(index){
                this.cuindex = index
            }
        }
    })

    var vmm = new Vue({
        el:'#nav',
        data:{
            navIndex:0,
            arr4:[
                {jpg:'img/2.JPG',navtitle:'首页'},
                {jpg:'img/3.JPG',navtitle:'订单'},
                {jpg:'img/2.JPG',navtitle:'我的'}
            ]
        },
        methods:{
            trs(index){
                this.navIndex=index
            }
        }
    })
</script>